<template>
	<view class="index">
		<!-- <navBar isBack title="优惠券"></navBar> -->
		<nav-bars bgColor="#fff" fontColor="#000" title="优惠券"></nav-bars>
		<view class="tabsList" style="">
			<u-tabs :list="list" :bar-style="tabsBottomStyle" bar-width="60" inactive-color="#939393"
				active-color="#333333" :is-scroll="false" font-size="28" :current="current" @change="TabsChange">
			</u-tabs>
		</view>
		<!-- 优惠券 -->
		<view class="coupon" :style="{'margin-top': tabsheight+'px'}">
			<view class="coupon_Column">
				<view class="coupon_Column_List">
					<view class="scoll-wrapper">
						<view class="floor-item" v-for="(item, index) in CouponList" :key="index">
							<view class="Column_view">
								<view
									:class="[item.is_expire == true ?'Column_ItemA':(item.sale_type == 1 ?'Column_Item':'Column_ItemB')]">
									<!-- :class="[item.is_redeem == 0?'Column_Item':'Column_ItemA']"  满{{item.condition*1}}可用-->
									<view class="ColumnPirce" v-if="item.discount_type !== 3">
										<text class="man">{{item.discount_type == 1 ?'¥':''}}</text>
										{{item.discount_type == 1?item.discount_money:item.discount_money}}
										<text class="zhe">{{item.discount_type == 1?'':'折'}}</text>
									</view>
									<view class="ColumnPirce" v-if="item.discount_type == 3">
										<text class="man">{{item.discount_type == 3 ?'¥':''}}</text>
										{{item.discount_type == 3?item.discount_money/10:item.discount_money/10}}
									</view>
									<view class="ColumnCondition">{{item.condition == 0?'无门槛':'满'+item.condition+'可用'}}
									</view>
								</view>
								<view class="ColumnMessage">
									<view class="ColumnTitle ellipsisText"
										:style="{color:item.is_expire == true ?'#BFBFBF':'#333333'}">{{item.name}}
									</view>
									<view>
										<!-- :style="{background:item.is_redeem == 0? '#EC6060':'#EC6060'}" -->
										<view class="ColumnBtn" v-if="current == 0"
											:style="{background:item.sale_type == 1? '#EC6060':'#E0C378'}"
											@click="GetDiscounts(item.id,index,item.sale_type)">
											{{item.sale_type == 1? '立即领取':item.price +'元购买'}}
										</view>
										<view class="ColumnDashed"></view>
										<view class="ColumnTime"
											:style="{color:item.is_expire == true ?'#BFBFBF':'#333333'}">
											<view v-if="current == 0 ">
												<!-- 有效期：{{item.time_type == 1?item.date +'天':$utils.getFormatDate(item.start_time*1000,"yyyy.MM.dd") +'-'+$utils.getFormatDate(item.end_time*1000,"yyyy.MM.dd")}} -->
												<view v-if="item.time_type == 1">
													{{item.date == 0?'有效期：不限制':  '有效期：'+item.date+'天'}}
												</view>
												<view v-else>
													{{item.start_time +'-'+item.end_time}}
												</view>
											</view>
											<view v-if="current == 1">
												有效期：{{item.start_time +'-'+item.end_time}}
											</view>
											<view @click="isHideView(index)">
												<u-icon :name="item.select == false ?'arrow-down':'arrow-up'"
													:color="item.is_expire == true ?'#BFBFBF':'#333333'" size="20">
												</u-icon>
											</view>
										</view>
									</view>
									<view class="ColumnRedeem" v-if="item.is_expire == true">
										<image src="https://cos.ryz1620.com/liankun/static/ISexpire.png">
										</image>
									</view>
									<!-- <view class="ColumnRedeem" v-if="item.is_redeem == 1">
										<image
											src="https://cos.ryz1620.com/default/2021_03_18_15_05_45_1071_UuFe6KJ07sz7TK9XIlSQEBdqWXsDyewE.jpg">
										</image>
									</view> -->
								</view>
								<view class="buy_tips" v-if="item.sale_type == 2">
									<image src="https://cos.ryz1620.com/liankun/static/buyColum.png"></image>
									<view class="buy_text">
										购
									</view>
								</view>
							</view>
							<view v-if="item.select" class="SelectView">
								<view>来源：页面领劵</view>
								<view style="word-wrap:break-word;">使用规则：一张订单只能使用一张类型的优惠券。购买部分特殊品牌商品是不能使用此优惠券。</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import URL from '@/config/url.js'
	// import navBar from '@/components/navBar/navBar.vue'
	import service_mall from '@/service/mall.js'
	import service_my from '@/service/my.js'
	export default {
		components: {
			// navBar
		},

		data() {
			return {
				list: [{
					name: '可领取'
				}, {
					name: '已领取'
				}],
				current: 0,
				tabsBottomStyle: {
					'border-radius': ' 4rpx',
					height: '8rpx',
					background: '#1D1D1D'
				},
				tabsheight: 45,
				CouponList: [], //优惠券
				CouponNum: 1,
			}
		},
		onShow() {

		},
		onReachBottom() {

		},
		onLoad(params) {
			this.$utils.getUrl()
			var that = this
			if (params.current != null) {
				console.log(params.current);
				that.current = params.current
				that.Getdiscountslist()
			} else {
				this.GetCouponData()
			}
			// that.current = 1
			// that.Getdiscountslist()
			var obj = uni.createSelectorQuery();
			setTimeout(() => {
				that.windowHeight = uni.getSystemInfoSync()['windowHeight']; //屏幕高度
				obj.select('.tabsList')
					.boundingClientRect(function(rect) {
						//获取子元素高度
						// console.log(rect);
						that.tabsheight = rect.height == 0 ? 45 : rect.height
					})
					.exec();
			}, 200);
		},
		methods: {
			isHideView(index) {
				// this.isHide = !this.isHide
				this.CouponList[index].select = !this.CouponList[index].select
			},

			TabsChange(index) {
				this.current = index;
				this.CouponList = []
				if (this.current == 0) {
					this.GetCouponData()
				} else {
					this.Getdiscountslist()
				}
			},
			TimeSlot(d1, d2) {
				var dateBegin = new Date(d1);
				var dateEnd = new Date(d2);
				var dateNow = new Date();
				var beginDiff = dateNow.getTime() - dateBegin.getTime();
				var beginDayDiff = Math.floor(beginDiff / (24 * 3600 * 1000));
				var endDiff = dateEnd.getTime() - dateNow.getTime();
				var endDayDiff = Math.floor(endDiff / (24 * 3600 * 1000));
				if (endDayDiff < 0) {
					// console.log("已过期");
					return "已过期"
					// return false
				}
				if (beginDayDiff < 0) {
					// console.log("没到开始时间");
					return "没到开始时间"
					// return false
				}
				// console.log("在时间范围内");
				return "在时间范围内"
				// return true
			},
			// 获取优惠券
			GetCouponData() {
				var that = this
				service_mall.nodiscountslist()
					.then(res => {
						if (res.code == 1) {
							// console.log(res.data);
							var cutList = res.data
							if (cutList.length) {
								cutList.forEach((item, index) => {
									item.select = false
									item.condition = item.condition * 1
									item.discount_money = item.discount_type == 1 ? item.discount_money * 1 :item.discount_money * 10
									item.start_time = that.$utils.getFormatDate(item.start_time*1000,"yyyy.MM.dd")
									item.end_time = that.$utils.getFormatDate(item.end_time*1000,"yyyy.MM.dd")
									// var is_expire =  this.TimeSlot(item.startTime,item.endTime)
									// console.log(is_expire);
									// $utils.getFormatDate(item.start_time*1000,"yyyy.MM.dd")
								})
								that.CouponList = cutList
							} else {
								that.CouponList = []
							}

						}
					})
			},
			// 已经领取优惠券
			Getdiscountslist() {
				var that = this
				service_mall.discountslist()
					.then(res => {
						if (res.code == 1) {
							// console.log(res.data);
							var cutList = res.data
							if (cutList.length) {
								cutList.forEach((item, index) => {
									item.select = false
									item.condition = item.condition * 1
									item.discount_money = item.discount_type == 1 ? item.discount_money * 1 :item.discount_money * 10
									item.start_time = that.$utils.getFormatDate(item.start_time*1000,"yyyy.MM.dd")
									item.end_time = that.$utils.getFormatDate(item.end_time*1000,"yyyy.MM.dd")
									// item.is_expire = true
								})
								that.CouponList = cutList
							} else {
								that.CouponList = []
							}
						}
					})
			},
			// 优惠券领取
			GetDiscounts(row, index, isclick) {
				var that = this
				if (isclick == 1) {
					uni.showLoading()
					service_mall.discounts({
							coupon_id: row
						})
						.then(res => {
							if (res.code == 1) {
								uni.hideLoading()
								uni.showToast({
									title: '领取成功',
									icon: 'success',
									duration: 1000
								})
								setTimeout(function() {
									// console.log(res);
									that.GetCouponData()
								}, 1000)

							} else {
								uni.hideLoading()
								that.$utils.showErr({
									title: res.msg
								})
							}
						})
				} else {
					service_my.getCouponOrder({
							coupon_id: row,
							num: that.CouponNum
						})
						.then(res => {
							let order_code = res.data.order_code
							that.getpayorder(order_code)
						})
						.catch(err => {})
				}
			},
			getpayorder(order_codes) {
				uni.showLoading('正在打开微信支付..')
				service_mall.getpay({
					order_no: order_codes,
					type: 'coupon_order',
					pay_type: 1
				}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						let data = res.data
						uni.requestPayment({
							appId: res.data.appId,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							signType: res.data.signType,
							timeStamp: res.data.timeStamp,
							success: (suc) => {
								uni.showToast({
									title: '购买成功',
									icon: 'success',
									duration: 1000
								})
							},
							fail: (err) => {

							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				})
			},
		},

	}
</script>

<style lang="scss">
	page {
		background: #F6F7FB;
	}

	.tabsList {
		position: fixed;
		z-index: 99;
		width: 100%;
		box-sizing: border-box;
		flex: 1;
		border-bottom: 1px solid #fcfcfc;
	}

	.ellipsisText {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	// 优惠券
	.coupon {
		// background: #fff;
		padding-top: 20rpx;

		.coupon_Column_List {
			white-space: nowrap;
			padding: 0rpx 20rpx 10rpx 32rpx;
			// padding-right: 18upx;
			// border-radius: 6upx;
			// margin-top:-140upx;
			// margin-left: 30upx;
			// background: #fff;
			// box-shadow: 1px 1px 5px rgba(0,0,0,.2);
			position: relative;
			z-index: 1;

			.scoll-wrapper {
				// display: flex;
				// align-items: flex-start;
				// margin-bottom: 30rpx;
				// background: #fff;
				padding-top: 12rpx;
				padding-bottom: 10rpx;

				// height: 200rpx;
				.floor-item {
					padding-right: 20rpx;
					margin-bottom: 20rpx;
					// .NullData {
					// 	width: 20rpx;
					// 	height: 280rpx;
					// }


					.Column_view {
						display: flex;
						position: relative;
						// width: 464rpx;
						height: 212rpx;
						background: #fff;


						// box-shadow: 0rpx 0rpx 16rpx rgba(0, 0, 0, 0.06);
						// margin-right: 24rpx;
						// border-radius: 10rpx;
						// overflow: hidden;
						.ColumnPirce {
							font-weight: 600;
							font-size: 76rpx;


							.man {
								font-size: 40rpx;
								font-weight: 400;
								padding-right: 10rpx;
							}

							.zhe {
								font-size: 40rpx;
								font-weight: 400;
								padding-left: 10rpx;
							}
						}

						.ColumnCondition {
							font-size: 28rpx;
						}

						.ColumnMessage {
							flex: 1;
							padding: 10rpx 10rpx 10rpx 18rpx;
							font-size: 28rpx;
							color: #333333;
							display: flex;
							position: relative;
							overflow: hidden;
							flex-direction: column;
							justify-content: space-between;
							box-shadow: 0rpx 0rpx 16rpx rgba(0, 0, 0, 0.06);
							border-radius: 0rpx 10rpx 10rpx 0rpx;

							.ColumnTitle {
								white-space: pre-line;
							}

							.ColumnRedeem {
								width: 144rpx;
								height: 144rpx;
								border-radius: 100%;
								overflow: hidden;
								position: absolute;
								top: -42rpx;
								right: -26rpx;
							}

						}

						.ColumnMessage::after {
							position: absolute;
							content: '';
							display: block;
							width: 30rpx;
							height: 30rpx;
							background: #F6F7FB;
							top: 50%;
							right: -15rpx;
							transform: translate(0%, -50%);
							border-radius: 100%;
						}

						.ColumnBtn {
							border-radius: 50rpx;
							width: max-content;
							color: #fff;
							padding: 4rpx 14rpx;
							font-size: 24rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-bottom: 10rpx;
						}

						.ColumnDashed {
							border-bottom: 1px dashed #707070;
							opacity: 0.23;
						}

						.ColumnTime {
							font-size: 24rpx;
							padding-top: 10rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding-right: 24rpx;
						}

						.buy_tips {
							width: 60rpx;
							height: 64rpx;
							position: absolute;
							top: 0;
							right: 24rpx;

							image {
								position: relative;
							}

							.buy_text {
								position: absolute;
								top: 40%;
								left: 50%;
								transform: translate(-40%, -50%);
								font-size: 26rpx;
								font-weight: 600;
								color: #fff;
							}
						}



					}

					.SelectView {
						background: #FAFAFA;
						padding: 20rpx 28rpx;
						white-space: pre-wrap;
						font-size: 20rpx;
						color: #A0A0A0;

						view {
							line-height: 28rpx;
						}
					}

					.Column_Item {
						width: 240rpx;
						height: 212rpx;
						color: #fff;
						position: relative;
						border-radius: 10rpx 0rpx 0rpx 10rpx;
						background-color: #EC6060;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;
					}

					.Column_Item::after {
						content: '';
						position: absolute;
						height: 100%;
						width: 5rpx;
						top: 0;
						right: -5rpx;
						background-image: linear-gradient(to bottom, #EC6060 5rpx, transparent 5rpx, transparent),
							radial-gradient(10rpx circle at 5rpx 10rpx, transparent 5rpx, #EC6060 5rpx);
						background-size: 5rpx 15rpx;
					}

					.Column_Item::before {
						position: absolute;
						content: '';
						display: block;
						width: 30rpx;
						height: 30rpx;
						background: #F6F7FB;
						top: 50%;
						left: -18rpx;
						transform: translate(0%, -50%);
						border-radius: 100%;
					}

					.Column_ItemA {
						width: 240rpx;
						height: 212rpx;
						color: #fff;
						position: relative;
						border-radius: 10rpx 0rpx 0rpx 10rpx;
						background-color: #BFBFBF;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;
					}

					.Column_ItemA::after {
						content: '';
						position: absolute;
						height: 100%;
						width: 5rpx;
						top: 0;
						right: -5rpx;
						background-image: linear-gradient(to bottom, #BFBFBF 5rpx, transparent 5rpx, transparent),
							radial-gradient(10rpx circle at 5rpx 10rpx, transparent 5rpx, #BFBFBF 5rpx);
						background-size: 5rpx 15rpx;
					}

					.Column_ItemA::before {
						position: absolute;
						content: '';
						display: block;
						width: 30rpx;
						height: 30rpx;
						background: #F6F7FB;
						top: 50%;
						left: -18rpx;
						transform: translate(0%, -50%);
						border-radius: 100%;
					}

					.Column_ItemB {
						width: 240rpx;
						height: 212rpx;
						color: #fff;
						border-radius: 10rpx 0rpx 0rpx 10rpx;
						position: relative;
						background-color: #E0C378;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;
					}

					.Column_ItemB::after {
						content: '';
						position: absolute;
						height: 100%;
						width: 5rpx;
						top: 0;
						right: -5rpx;
						background-image: linear-gradient(to bottom, #E0C378 5rpx, transparent 5rpx, transparent),
							radial-gradient(10rpx circle at 5rpx 10rpx, transparent 5rpx, #E0C378 5rpx);
						background-size: 5rpx 15rpx;
					}

					.Column_ItemB::before {
						position: absolute;
						content: '';
						display: block;
						width: 30rpx;
						height: 30rpx;
						background: #F6F7FB;
						top: 50%;
						left: -18rpx;
						transform: translate(0%, -50%);
						border-radius: 100%;
					}


				}
			}
		}

	}
</style>
